<template>
   <h1>sum:{{ sum }}</h1>
  <h1>姓名:{{ person.name }}</h1>
  <h1>年龄:{{ person.age }}</h1>
  <h1>薪资:{{ person.job.job1 }}K</h1>
  <h1>车名:{{ person.car?.name }}K</h1>
  <button @click="person.name+='~'">修改姓名</button>
 <button @click="person.age++">修改年龄</button>
  <button @click="person.job.job1 ++">修改薪资</button> 
  <button @click="sum ++">求和</button> 
  <button @click="showPersion">输出原始的persion</button> 
  <button @click="changeCarName">修改车的名称</button> 






</template>
<script setup lang="ts">
// 总结：
// toRaw
//  可以返回由 reactive()、readonly()、shallowReactive() 或者 shallowReadonly() 创建的代理对应的原始对象(整体都不具有响应式，)。
// markRaw :
// 标记一个对象，使其不具有响应式
  //  注意：
  //  只能是在原来响应式对象的基础上添加一个属性，并且希望值不具有响应式

import {reactive,toRef ,toRefs,shallowReactive,shallowRef,ref,readonly,shallowReadonly,toRaw,markRaw} from 'vue';
let sum=ref(0)
 let person=reactive({
  name:'zs',
  age:12,
  job:{
    job1:14
  }
 })
 const changeCarName=()=>{
  person.car.name+='!'
  console.log(person.car.name)
 }
 const showPersion=()=>{
  // person=readonly(person)
  // person=shallowReadonly(person))87878---------
  // person.car=markRaw({'name':'小车车'})
  person.car=markRaw({'name':'小车车'})

  
  // const p=markRaw(person)
  // p.age++
  // p.job.job1++
  // console.log('p',p)


 }



</script>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>
